<template>
	<view class="uni-carousel">
		<view class="cate-section">
			<swiper class="carousel" indicator-dots="true" :autoplay="false" interval="50000" duration="500" :style="{ height:backHeight+'px' }"
			 :indicator-dots="indicator" indicator-active-color="#ff304d" indicator-color="#BFBFBF" v-if="indicator">
				<swiper-item v-for="(item, index) in deparList" :key="index" class="carousel-item">
					<view class="cate-item" v-for="(li, ins) in item" :key="ins" :style="{width:boxWidth + '%'}" @click="onCarousel(li)"
					 v-if="ins < number">
						<image :src="li.image" :style="{width:width+'px',height:width+'px'}"></image>
						<text :style="{color:color,'font-size':fontSize}" v-if="li.title != ''">{{li.title}}</text>
					</view>
				</swiper-item>
			</swiper>

			<view class="carousel" :style="{ height:backHeight+'px' }" v-if="!indicator">
				<view v-for="(item, index) in deparList" :key="index" class="carousel-item">
					<view class="cate-item" v-for="(li, ins) in item" :key="ins" :style="{width:boxWidth + '%'}" @click="onCarousel(li)"
					 v-if="ins < number">
						<image :src="li.image" :style="{width:width+'px',height:width+'px'}"></image>
						<text :style="{color:color,'font-size':fontSize}" v-if="li.title != ''">{{li.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deparList: [],
				backHeight: '',
				boxWidth: '',
				indicator: false,
				number: 10,
			};
		},
		props: {
			/* 每页显示 type 行 */
			type: {
				type: String
			},
			/* 每行显示 num 个 */
			num: {
				type: String
			},
			/* 每行高度 */
			height: {
				type: String,
				default: '40'
			},
			/* 图片宽高 */
			width: {
				type: String,
				default: '50'
			},
			/* 字体大小 */
			fontSize: {
				type: String,
				default: '26upx'
			},
			/* 文字颜色 */
			color: {
				type: String,
				default: '#303133'
			},
			/* 数据列表 */
			carouselList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		created() {
			this.deparList = [];
			this.boxWidth = 100 / this.num;
			var height = this.height * this.type;

			/* 菜单总数据 */
			var list = this.carouselList;
			/* 每一页的数据条数 */
			var num = this.type * this.num;
			this.number = num;

			if (num >= list.length) {
				this.indicator = false;
			} else {
				height = height + 20;
				this.indicator = true;
			}
			this.backHeight = height;

			/* 菜单数据分页 */
			var sub = 0;
			var number = Math.ceil(list.length / num);
			var type = num - 1;
			for (var i = 1; i <= number; i++) {
				var data = [];
				for (var id = 0; id <= type; id++) {
					sub = (i - 1) * num + id;
					var li = list[sub];
					if (li) {
						data.push(li);
					}
				}
				this.deparList.push(data);
			}

		},
		methods: {
			onCarousel(item) {
				this.$emit('onCarousel', item);
			},
		}
	}
</script>

<style lang="scss">
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx 0;
		background: #fff;

		.cate-item {
			/* width: 25%; */
			float: left;
			padding-bottom: 20upx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		image {
			width: 100upx;
			height: 100upx;
			/* margin-bottom: 14upx; */
			border-radius: 50%;
			margin-bottom: 20upx;
		}
	}

	.carousel {
		width: 100%;
	}
</style>
